<template>
  <div class="dashboard-container">
    <common-view
      :table-prop="tableProp"
      :form-rules="formRules"
      module-name="userList"
      :search="getUserList"
      :add="addUser"
      :update="updateUserInfoByUserList"
      :get-form-data="getFormData"
      :get-search-data="getSearchData"
    />
  </div>
</template>

<script>

import CommonView from '@/components/commonView/index.vue'
import { getUserList, addUser, updateUserInfoByUserList } from '@/api/user'
import { getAllClassRoom } from '@/api/classroom'
import { getAllProfession } from '@/api/profession'
import { getAllDormitory } from '@/api/dormitory'
import { getAllRoom } from '@/api/room'
import { getCodeList } from '@/api/code'

export default {
  name: 'UserList',
  components: { 'common-view': CommonView },
  data() {
    return {
      getUserList,
      addUser,
      updateUserInfoByUserList,
      userList: [],
      classroomList: [],
      professionList: [],
      dormitoryList: [],
      codeList: [],
      roomList: [],
      tableProp: [
        {
          prop: 'userName',
          label: '学号',
          width: 100
        },
        {
          prop: 'nickName',
          label: '姓名',
          width: 90
        }, {
          prop: 'sex',
          label: '性别',
          width: 50
        },
        {
          prop: 'classId',
          label: '班级',
          width: 150
          // formatter: value => {
          //   const findClassRoom = this.classroomList.find(item => value.classRoomId === item.id)
          //   if (findClassRoom) {
          //     const findProfession = this.professionList.find(item => findClassRoom.professionId === item.id)
          //     if (findProfession) {
          //       const professionName = findProfession.professionName
          //       if (value.admissionYear) {
          //         const admissionYear = value.admissionYear.toString().slice(-2)
          //         const classCode = findClassRoom.classCode
          //         return `${professionName}${admissionYear}${classCode}`
          //       }
          //     }
          //   }
          //   return '--'
          // }
        },
        {
          prop: 'room',
          label: '宿舍',
          width: 90
          // formatter: value => {
          //   const findRoom = this.roomList.find(item => value.roomId === item.id)
          //   if (findRoom) {
          //     const findDormitory = this.dormitoryList.find(item => findRoom.dormitoryId === item.id)
          //     if (findDormitory) {
          //       const building = findDormitory.building
          //       const tablet = findRoom.tablet
          //       return `${building}幢${tablet}`
          //     }
          //   }
          //   return '--'
          // }
        }, {
          prop: 'nationalityId',
          label: '民族',
          width: 60
          // formatter: value => {
          //   const findNationality = this.codeList.nationalityList.find(item => item.id === value.nationalityId)
          //   return findNationality ? findNationality.value : '--'
          // }
        }, {
          prop: 'birthplaceId',
          label: '生源地',
          width: 200
          // formatter: value => {
          //   const birthplaceId = value.area
          //   var birthplaceName = ''
          //   if (birthplaceId) {
          //     const birthplaceIdList = birthplaceId.split(',')
          //     const findProvince = this.codeList.areaList.find(item => item.code.toString() === birthplaceIdList[0])
          //     if (findProvince) {
          //       birthplaceName = birthplaceName + findProvince.value
          //       if (findProvince.children) {
          //         const findMuniciPal = findProvince.children.find(item => item.code.toString() === birthplaceIdList[1])
          //         if (findMuniciPal) {
          //           birthplaceName = birthplaceName + `-${findMuniciPal.value}`
          //           if (findMuniciPal.children) {
          //             const findCounty = findMuniciPal.children.find(item => item.code.toString() === birthplaceIdList[2])
          //             if (findCounty) {
          //               birthplaceName = birthplaceName + `-${findCounty.value}`
          //             }
          //           }
          //         }
          //       }
          //     }
          //   }
          //   return birthplaceName.length ? birthplaceName : '--'
          // }
        },
        {
          prop: 'academicYear',
          label: '学制(年)',
          width: 80
        },
        {
          prop: 'culturalLevelId',
          label: '学历',
          width: 100
          // formatter: value => {
          //   const findCultural = this.codeList.culturalLevelList.find(item => item.id === value.culturalLevelId)
          //   return findCultural ? findCultural.value : '--'
          // }
        },
        {
          prop: 'isPay',
          label: '是否付费',
          width: 80
          // formatter: value => {
          //   return !value.isPay ? <span style='color:red'>未缴费</span> : <span style='color:#409EFF'>已缴费</span>
          // }
        },
        {
          prop: 'isDisabled',
          label: '是否禁用',
          width: 80
        },
        {
          prop: 'isDisabledMode',
          label: '是否开启默认禁用'
        }
      ],
      formRules: {
        userName: [
          { required: true, message: '请输入学号', trigger: 'change' }
        ],
        nickName: [
          { required: true, message: '请输入名称', trigger: 'change' }
        ],
        idCard: [
          { required: true, message: '请输入身份证', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        academicYear: [
          { required: true, message: '请输入学制', trigger: 'change' }
        ],
        admissionYear: [
          { required: true, message: '请选择入学时间', trigger: 'change' }
        ],
        classRoomId: [
          { required: true, message: '请选择班级', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    // 数据初始化
    this.init()
  },
  methods: {
    async init() {
      const
        [
          classroomList,
          professionList,
          dormitoryList,
          roomList,
          codeList
        ] = await
        Promise.all(
          [
            getAllClassRoom(),
            getAllProfession(),
            getAllDormitory(),
            getAllRoom(),
            getCodeList()
          ])
      this.classroomList = classroomList
      this.professionList = professionList
      this.dormitoryList = dormitoryList
      this.roomList = roomList
      this.codeList = codeList
    },
    // 新增、编辑表单转换
    getFormData(formData, handle, id) {
      console.log('转换前', formData)
      const { userName, nickName, idCard, sex, academicYear, admissionYear, classRoomId } = formData
      const newFormData = { userName, nickName, idCard, sex, academicYear, admissionYear: admissionYear.toString(), classRoomId }
      if (handle === 'edit') {
        newFormData['id'] = id
      }
      return newFormData
    },
    // 查询条件转换
    getSearchData(formData) {
      const { userName, nickName } = formData
      return {
        userName, nickName
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
}
</style>
